<%--
  Author: chengwei
  Date: 2016/5/26
  Time: 16:48
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <%--<link rel="stylesheet" href="/resource/easyui/themes/default/easyui.css">--%>
    <link rel="stylesheet" href="/resource/bootstrap/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <%--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">--%>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/resource/js/jquery.min.js"></script>

    <%--<script src="/resource/easyui/jquery.easyui.min.js"></script>--%>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/resource/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-default" type="button" onclick="editColumn('');">增加</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="columnList" class="table">
                <thead>
                <tr>
                    <th>栏目名称</th>
                    <th>显示顺序</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="editColumn">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑栏目</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="form_column">
                        <div class="form-group">
                            <label for="column_name" class="col-sm-2 control-label">栏目名称</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="column_name" placeholder="名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="show_order" class="col-sm-2 control-label">显示顺序</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="show_order" placeholder="顺序">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="doSave();">保存</button>
                </div>
            </div>
        </div>
    </div>
    
</div>
</body>
<script>
    $(function () {
        loadTableTHead();
        loadTableTBody();
        loadTableTFooter();
    });

    function loadTableTHead() {

    }

    function loadTableTBody() {
        $.post("/column/col", {}, function (d) {
            var row = "";
            $.each(d.column, function (i, item) {
                row += "<tr>";
                row += "<td>" + item.name + "</td>";
                row += "<td>" + item.show_order + "</td>";
                row += "<td>" + "<button class='btn btn-default' type='button' onclick=\"editColumn('" + item.column_id + "');\">编辑</button>" + "</td>";
                row += "</tr>";
            });
            $("#columnList tbody").html(row);
        });
    }

    function loadTableTFooter() {

    }

    function editColumn(id) {
        $("#column_id").val(id);
        
        //获取栏目详情
        $.post("");
        $('#editColumn').modal('show');
    }
    
    function doSave() {
        var $form_column = $("#form_column").serializeArray();
        $.post("",$form_column,function(d) {
            
        });
    }
</script>
</html>
